<!-- 商品详情 -->

<template>
  <el-form
    ref="formRef"
    :model="form.data"
    :disabled="form.status==='r'||form.submitting"
    :label-width="form.show&&isActive?'auto':undefined"
    class="commodity-form-module"
  >
    <div class="column-2">
      <!-- 首页封面图规则：必选, 1. 限制1张图片 2. 比例16: 9 -->
      <el-form-item
        style="grid-area:首页封面图"
        label="首页封面图"
        prop="indexCoverUrl"
        verify
      >
        <Imgpond
          v-model="form.data.indexCoverUrl"
          valueType="string"
          :count="1"
          aspectRatio="16/9"
        />
      </el-form-item>

      <!-- 列表封面图规则：必选, 1. 限制1张图片 2. 比例1: 1 -->
      <el-form-item
        style="grid-area:列表封面图"
        label="列表封面图"
        prop="productCoverUrl"
        verify
      >
        <Imgpond
          v-model="form.data.productCoverUrl"
          :count="1"
          aspectRatio="1/1"
        />
      </el-form-item>
    </div>

    <!-- 产品详情图规则：必选, 1. 限制10张图片 2. 比例16: 9 -->
    <el-form-item
      style="grid-area:商品详情图"
      label="商品详情图"
      prop="pictureUrl"
      verify
    >
      <Imgpond
        v-model="form.data.pictureUrl"
        :count="10"
        aspectRatio="1/1"
      />
    </el-form-item>

    <!-- 图文介绍规则：必选, 1. 可插入图片附件 -->
    <el-form-item
      style="grid-area:图文介绍"
      label="图文介绍"
      prop="pictureTextInfo"
      verify
    >
      <MiniMCE
        v-model="form.data.pictureTextInfo"
        :disabled="form.status==='r'||form.submitting"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import mixin from './mixin'

export default {
  name: 'CommodityDetail',
  mixins: [mixin],
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
/*.el-form {
  display: grid;
  justify-content: space-between;
  margin-left: 2.5vw;
  margin-right: calc(342px + 50px + 2.5vw);
  grid-template-columns: 1fr 210px 210px;
  grid-template-rows: 125px 1fr;
  grid-template-areas:
        "图文介绍 首页封面图 列表封面图"
        "图文介绍 商品详情图 商品详情图";
  grid-gap: 100px;
}*/
</style>
